<template>
    <el-card class="box-card">
        <el-avatar :size="140" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
        <div v-for="(item, index) in personalMessage" :key="index" class="text item">
            <span class="keepToTheLeft">
                <el-icon :size="14">
                    <component :is="item.icon" class="icon"></component>
                </el-icon>
                <span>{{ item.title }}</span></span>
            <span class="keepToTheRight">{{ item.content }}</span>
        </div>
    </el-card>
    <el-card class="box-card">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="基本资料" name="first"></el-tab-pane>
            <el-tab-pane label="修改密码" name="second"></el-tab-pane>
        </el-tabs>
        <el-form ref="formRef" :model="ruleForm" label-width="100px" class="ruleForm" :rules="rules">
            <template v-if="isBasicInformation">
                <el-form-item label="用户昵称" prop="username">
                    <el-input v-model.number="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="ruleForm.gender">
                        <el-radio label="男" />
                        <el-radio label="女" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input v-model.number="ruleForm.oldPassword" type="password" autocomplete="off"
                        placeholder="请输入旧密码" />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" placeholder="请输入新密码" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="ruleForm.confirmPassword" type="password" autocomplete="off"
                        placeholder="请确认密码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
                </el-form-item>
            </template>
        </el-form>
    </el-card>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus';
import { useLoginInformation } from '@/store/loginInformation';
import { GetAllUser } from '@/request/api';
import { onMounted } from 'vue';

const loginInformationStore = useLoginInformation();
let personalMessage = ref([
    { id: "username", icon: "UserFilled", title: "用户名称", content: "" },
    { id: "phoneNumber", icon: "Iphone", title: "手机号码", content: "" },
    { id: "email", icon: "Message", title: "用户邮箱", content: "" },
    { icon: "Histogram", title: "所属部门", content: "EAI开发部" },
    { icon: "Crop", title: "所属岗位", content: "员工" },
    { icon: "Avatar", title: "所属角色", content: "员工" },
    { icon: "AlarmClock", title: "创建日期", content: "2023-06-09 14:31:13" }
])
const activeName = ref('first')
let isBasicInformation = ref(true)
const formRef = ref<FormInstance>()
const ruleForm = reactive({
    username: '刘亮',
    phoneNumber: '15004435530',
    email: "liuliang@ejiakeji.cn",
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
    gender: "男"
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== ruleForm.newPassword) {
        callback(new Error("两次输入的密码不一致！"))
    } else {
        callback()
    }
}
const rules = reactive<FormRules>({
    phoneNumber: [{ required: true, message: '手机号码不能为空' }],
    email: [{ required: true, message: '邮箱不能为空' }, { type: "email", message: "请输入正确格式的邮箱" }],
    oldPassword: [{ required: true, message: '旧密码不能为空' }],
    newPassword: [{ required: true, message: '新密码码不能为空' }],
    confirmPassword: [{ required: true, message: '确认密码不能为空' }, { validator: validatePass, trigger: 'blur' }],
})
const handleClick = (tab: TabsPaneContext) => {
    if (tab.paneName == "first") {
        isBasicInformation.value = true
    } else {
        isBasicInformation.value = false
    }
}
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

onMounted(() => {
    getCurrentPersonnel()
})

async function getCurrentPersonnel() {
    try {
        const res = await GetAllUser({ name: loginInformationStore.loginInformation.userName })
        Object.assign(ruleForm, res.data.result[0])
        for (let i = 0; i < personalMessage.value.length; i++) {
            for (let key in res.data.result[0]) {
                if (personalMessage.value[i].id == key) {
                    personalMessage.value[i].content = res.data.result[0][key]
                }
            }
        }
    } catch (error) {
        console.log(error)
    }
}

</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
    margin-top: 3px;
}

.keepToTheRight {
    float: right;
}

.keepToTheLeft {
    float: left;
}

.ruleForm {
    padding: 10px;
}
</style>